<template>
  <div class="noticePage">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack"></Header>
    <div class="inform">
      <div class="tabWrap">
        <div class="informTab">
          <p  v-for="(item,index) in ffclTab" @click.stop="choiseHead(index)" :class="{'active':defaultIndex==index}"  :style="{width:width+'px'}">
            <router-link :to="{name:'notice',query:{id:item.id}}">
              <a >{{item.name}}</a>
            </router-link>
          </p>
        </div>
      </div>

      <div class="informContent">
        <div class="informItem" v-for="(item,index) in itemList">
          <router-link :to="{path:'/article',query:{id:item.id,url:item.url}}">
            <a class="ffclItemList" >
              <div class="ffclItemLeft">
                <img :src=item.thumb alt="">
              </div>
              <div class="ffclItemRight">
                <p class="ffclTitle">
                  {{item.title}}                     </p>
                <p class="ffclDate">
                  <span class="ffclDetailData">{{item.ctime}}</span>
                  <span class="ffclTopic">  {{item.istop}} </span>
                </p>
              </div>
            </a>
          </router-link>
        </div>
      </div>
    </div>
    <div class="loadComponent">
      <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips" >正在加载</span>
      </div>
      <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
        <span class="weui-loadmore__tips">到底了</span>
      </div>
      <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
        更多
      </div>
    </div>
    <div id="loadingToast" v-if="showLoading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
  </div>
</template>
<script>
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  export default({
    data(){
        return {
          ffclTab:[],
          defaultIndex:0,
          defaultPage:1,
          nomoreData:false,
          loadmoreClick:false,
          moreData:true,
          showLoading:false,
          itemList:[],
          title:'通知公告',
          width:''
        }
    },
    components:{
      Aside:aside,
      Header:header
    },

    methods:{
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
        this.defaultPage ++
        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      choiseHead(index){
        this.defaultIndex =index
        this.showLoading =true
        this.defaultPage =1
        this.itemList =[]
        this.moreData =true
        this.loadmoreClick =false
        this.nomoreData =false
        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      fetchData(id='all',page=1){
//        console.log(id)
//        console.log(page)
        let that =this
        this.axios.get('/home/notice/getNotice?'+`${this.baseUrl}`,{
          params:{
            cate_id:id,
            p:page
          }
        }).then((res)=>{
//          console.log(res.data.data)
          if(res.data.data.length>=0){
            if(this.loadmoreClick){
              this.loadmoreClick =false
              this.moreData =true
            }
            if(res.data.data.length ===0){
              this.nomoreData =true
              this.moreData =false
              this.loadmoreClick =false
            }
            that.showLoading=false
          }
          this.itemList.push(...res.data.data)
//          console.log(this.itemList)
        })
          .catch((err)=>{
            console.log(err)
            if(this.loadmoreClick){
              this.loadmoreClick =false
            }
            that.showLoading=false
          })
      },
      init(){
        this.axios.get('/home/notice/getCate?'+`${this.baseUrl}`)
          .then((res)=>{
//            console.log(res.data.data)
            this.ffclTab =res.data.data
            for(var i=0;i<res.data.data.length;i++){
              if(this.$route.query.id ==res.data.data[i].id){
//                console.log(this.defaultIndex)
                this.defaultIndex=i
              }
            }
            var clientWidth =document.documentElement.clientWidth
            if(clientWidth>=750){
              clientWidth =$('body').width()
            }
            var pWidth =clientWidth/4;
            this.width =pWidth
            $('.ffclTab').css('min-width', res.data.data.length*pWidth+'px')
            $('.tabWrap').scrollLeft(this.defaultIndex*pWidth)
          })
      }
    },
    mounted(){
      $('body').removeClass('active')
      this.init()
      this.fetchData(this.$route.query.id,this.defaultPage)
    },
  })
</script>
<style scoped>
  .inform{
    padding-top: 0.8rem;
  }
  .tabWrap{
    width: 100%;
    overflow-x: scroll;
  }
  .informTab{
    width: 100%;
    height: 0.88rem;
    background: white;
    font-size: 0;
  }
  .informTab p{
    display: inline-block;
    width: 25%;
    height: 100%;
    line-height: 0.88rem;
    font-size: 0.32rem;
    color: #999999;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }



  .informTab p a{
    color: #999999;
  }
  .informTab p.active  a{
    color: #e83329;
  }
  .informTab p.active{
    border-bottom: 0.02rem solid #e83329;
  }
  .informContent{
    background: #ffffff;
  }
  .informItem{
  }
  .informItem.active{
    display: block;
  }
  .informContent{
    padding: 0.2rem 0.32rem;
    background:#f9f5f5;
  }
  .ffclItemList{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    background: white;
    padding: 0.2rem;
    margin-bottom: 0.08rem;

  }
  .ffclContentItem{
    display: none;
  }
  .ffclContentItem.active{
    display: block;
  }
  .ffclItemLeft,.ffclItemLeft img{
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.22rem;
    border-radius: 50%;
  }
  .ffclItemRight{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .ffclTitle{
    font-size: 0.32rem;
    color: #333333;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;
  }
  .ffclDate{
    font-size: 0.26rem;
    color: #999;
    padding-top: 0.2rem;
  }
  .ffclTopic{
    float: right;
  }

</style>
